<template>
	<transition name="slide-fade">
		<view class="questionList" ref="questionList" v-if="questionListB">
			<view class="quit"></view>
			<view class="xiala" @click="listNone">
				<image class="icon-xiala" src="../../static/fonts/xiala.png"></image>
			</view>
			<view class="questionCont">
				<view class="content">
					<view class="hasDown">
						当前已答：
						<span>{{getHasDONum()}}</span>
						/
						<span>{{exam.quesNum}}</span>
					</view>
					<view class="numList">
						<view class="num" @click="quesListTo(item,index)" :class="{'numFinish': isInMap(hasQuesSort,item)}" v-for="(item,index) in quesSort" :key="item">{{item}}</view>
					</view>
				</view>
			</view>
			<button class="commit" @click="commit()">我要交卷</button>
		</view>
	</transition>
</template>

<script>
	import Home from "../../api/home/home.js"
	// const hasQuesSort = new Map();
	export default{
		data(){
			return {
				quesSort: [],
				hasQuesSort: null,
				hasNumFinish: false
			}
		},
		props:{
			questionListB: {
				type: Boolean,
				default: false
			},
			exam: {
				type: Object
			}
		},
		mounted(){
			this.questionSort()
		},
		methods: {
			// 将所有题目存成一个数组
			questionSort(){
				this.hasQuesSort = new Map();
				for(let i=1;i<=this.exam.quesNum;i++){
					this.quesSort.push(i)
				}

				if(Object.keys(this.exam.userHasAnswerQues).length!==0){
					for(var index in this.exam.userHasAnswerQues){
						// 将已经答过的题号和答案存到map集合中
						this.hasQuesSort.set(parseInt(index),this.exam.userHasAnswerQues[index])
					}
				}
				
			},
			getHasDONum(){
				if(this.hasQuesSort===null){
					return 0
				}else{
					return this.hasQuesSort.size
				}
			},
			// 是否存在于集合中
			isInMap(map,item){
				for (var [key, value] of map) {
					if(item === key){
				  		return true;
				  	}
				}
			    return false;
			},
			listNone(){
				this.$emit('chengeQuestionListB')
			},
			// 点击答题卡，跳转到相应题目
			quesListTo(item,index){
				this.$emit("quesListTo",item)
				
			},
			// 交卷
			examFinish(){
				var that = this
				uni.showLoading({
				    title: '收卷中……',
					mask: true,
					success() {
						Home.status(that.exam.recordId).then(res=>{
							if(res.code===0){
								// 提交试卷，map集合置空
								that.hasQuesSort.clear()
								uni.hideLoading();
								uni.redirectTo({
									url: '/pages/exam-finish/exam-finish?scoreInfo='+JSON.stringify(res.data)
								})
							}
						})
					}
				});
			},
			commit(){
				var that = this
				var residue = this.quesSort.length - this.hasQuesSort.size
				var arr = []
				// 当未答题目大于20道时，只显示20道
				var arrTwo = []
				var noDoQuesList = ''
				var noDoQuesListTwo = ''
				if(residue!==0){
					if(this.hasQuesSort.size===0){
						arr = this.quesSort
					}else{
						for(var i=0;i<this.quesSort.length;i++){
							if(this.isInMap(this.hasQuesSort,this.quesSort[i])===false){
								arr.push(this.quesSort[i])
							}
						}
					}
					
					// 当未答题目大于20道时，只显示20道
					if(arr.length>20){
						for(var i=0;i<20;i++){
							arrTwo.push(arr[i])
						}
					}
					noDoQuesList = arr.toString()
					noDoQuesListTwo = arrTwo.toString()
				}
				
				if(residue===0){
					uni.showModal({
						title: '我要交卷',
						content: '您已答题结束，是否确认交卷？',
						success(res) {
							if(res.confirm){
								that.examFinish()
							}
						}
					})
				}else{
					if(arr.length>20){
						uni.showModal({
							title: '我要交卷',
							content: '您还有'+residue+'道题未做，分别为第'+noDoQuesListTwo+'等道，是否确认交卷？',
							success(res) {
								if(res.confirm){
									that.examFinish()
								}
							}
						})
					}else{
						uni.showModal({
							title: '我要交卷',
							content: '您还有'+residue+'道题未做，分别为第'+noDoQuesList+'道，是否确认交卷？',
							success(res) {
								if(res.confirm){
									that.examFinish()
								}
							}
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.questionList{
		width: 750rpx;
		height: 610rpx;
		background-color: #fcf4e4;
		position: absolute;
		bottom: 0;
		.quit{
			width: 200rpx;
			height: 200rpx;
			background-color: #fcf4e4;
			border-radius: 50%;
			position: absolute;
			top: -60rpx;
			left: 275rpx;
		}
		.xiala{
			position: absolute;
			top: -40rpx;
			left: 350rpx;
			cursor: pointer;
			.icon-xiala{
				width: 50rpx;
				height: 45rpx;
			}
		}
		.questionCont{
			position: relative;
			.content{
				width: 500rpx;
				margin: auto;
				box-sizing: border-box;
				z-index: 10;
				.hasDown{
					padding: 50rpx 0;
					text-align: center;
				}
				.numList{
					height: 300rpx;
					overflow: auto;
					display: flex;
					justify-content: space-around;
					flex-wrap: wrap;
					margin-bottom: 40rpx;
					.num{
						font-size: 30rpx;
						width: 60rpx;
						height: 60rpx;
						margin: 20rpx;
						line-height: 60rpx;
						text-align: center;
						background-color: #fff;
						border: 3rpx solid #fdbb53;
						box-sizing: border-box;
					}
					.numFinish{
						background-color: #fdbb53;
					}
					.numHasDown{
						background-color: #fdbb53;
					}
				}
			}
		}
		.commit{
			width: 690rpx;
			height: 80rpx;
			line-height: 80rpx;
			background-color: red;
			color: #ffff;
		}
	}
	.slide-fade-enter-active {
		transition: all .5s ease;
	}
	.slide-fade-leave-active {
		transition: all .5s ease;
	}
	.slide-fade-enter, .slide-fade-leave-to{
		transform: translateY(20px);
		opacity: 0;
	}
</style>
